import { List, Row, Col, Button, Upload, Modal } from "antd";
import { InboxOutlined } from '@ant-design/icons';
import styles from './index.less';
import { FileFilled, FolderFilled, ExclamationCircleOutlined } from '@ant-design/icons';
import { message } from "antd";
import { useState } from 'react';
import { getFlowZipFileList } from "../service";
import { useEffect } from "react";
import { Empty } from "antd";

export default (props) => {

    const { confirm } = Modal;
    const { record, onSuccess, id, loading } = props;
    const { Dragger } = Upload;
    const [backupDirectory, setBackupDirectory] = useState({ directorys: [] });
    const [uploadDirectory, setUploadDirectory] = useState({ directoryList: [] });

    const uploadProps = {
        name: 'file',
        multiple: false,
        action: `${record?.agentServer?.agentAddress + record.uploadPath}?serverName=${record.serverName}`,
        onChange(info) {
            const { status } = info.file;

            if (status === 'done') {
                if (info.file.response.success) {
                    message.success(`${info.file.name} 文件上传成功.`);
                    setUploadDirectory(info.file.response.data);
                }
                else {
                    message.error(`${info.file.name} 文件上传失败.${info.file.response.message}`);
                }
            } else if (status === 'error') {
                message.error(`${info.file.name} 文件上传失败.`);
            }
        }
    };
    const notBackupDirectory = uploadDirectory.directoryList.filter(i => !backupDirectory.directorys.map(i => i.path).includes(i.path));
    useEffect(() => {
        async function init() {
            const response = await getFlowZipFileList({ id });
            if (response.success) {
                const aa = response.data.filter(i => i.nodeType === 1);
                if (aa.length > 0) {
                    setBackupDirectory(aa[0]);
                }

            }
        }
        init();
    }, [id])
    return <div>
        <Row gutter={[12]} style={{ marginBottom: "10px" }} justify={"end"}>
            <Col>
                <Button
                    loading={loading}
                    onClick={() => {
                        if (!uploadDirectory.path) {
                            message.error("请先上传文件!")
                            return;
                        }
                        if (notBackupDirectory.length > 0) {
                            confirm({
                                title: '未备份文件',
                                icon: <ExclamationCircleOutlined />,
                                content: '有未备份文件,是否继续?',
                                onOk() {
                                    onSuccess(uploadDirectory.path);

                                }
                            })
                        }
                        else {
                            onSuccess();
                        }

                    }}
                    type="primary">
                    确认/下一步
                </Button>

            </Col>

        </Row>
        <Dragger {...uploadProps}>
            <p className="ant-upload-drag-icon">
                <InboxOutlined />
            </p>
            <p className="ant-upload-text">点击上传或拖拽到此处上传</p>
            <p className="ant-upload-hint">
                当前仅支持上传zip文件
            </p>
        </Dragger>

        <Row style={{ marginTop: "20px" }} gutter={[12]}>
            <Col span={12}>
                <div style={{ marginBottom: "12px" }}>备份文件</div>

                {backupDirectory.isDeleted ? <Empty description="备份目录已删除" /> : <List
                    style={{ marginBottom: "12px" }}
                    size="small"
                    bordered
                    key={"list1"}
                    dataSource={backupDirectory.directorys && backupDirectory.directorys.length > 20 ? [...backupDirectory.directorys.slice(0, 20), { path: "剩余文件太多,不再展示" }] : backupDirectory.directorys}
                    renderItem={(item) =>
                        <List.Item>
                            <div className={styles.directory}>
                                <span >
                                    {item.type === 1
                                        ? <FileFilled style={{ color: "#ff21b9", marginRight: "4px", fontSize: "11px" }} />
                                        : <FolderFilled style={{ color: "#54aeff", marginRight: "4px" }} />}

                                    {item.path === ".." ? "" : <span>
                                        {item.path.split("\\")[item.path.split("\\").length - 1]}

                                    </span>}


                                </span>


                            </div></List.Item>}
                />}

            </Col>
            <Col span={12}>
                <div style={{ marginBottom: "12px" }}>上传后未备份文件</div>


                <List
                    style={{ marginBottom: "12px" }}
                    size="small"
                    bordered
                    key={"list2"}
                    dataSource={notBackupDirectory}
                    renderItem={(item) =>
                        <List.Item>
                            <div className={styles.directory}>
                                <span onClick={() => {
                                }}>
                                    {item.type === 1
                                        ? <FileFilled style={{ color: "#ff21b9", marginRight: "4px", fontSize: "11px" }} />
                                        : <FolderFilled style={{ color: "#54aeff", marginRight: "4px" }} />}

                                    {item.path === ".." ? "" : <span>
                                        {item.path}
                                        <span style={{ color: "red", marginLeft: "10px", fontSize: "12px" }}>未备份</span>
                                    </span>}

                                </span>
                            </div></List.Item>}
                />
            </Col>
        </Row>
    </div>
}